{% extends 'base.html' %}
{% load staticfiles %}


{% block content %}
    <div class="container-fluid">  <!-- 开加一个container的目的是为了让整体布局居中 -->
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"></div>
                        <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">

                <div class="center-block">
                    <div id="playercontainer"></div>
                </div>
                        </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

            <div class="row" style="height:800px; overflow:scroll;"><!-- 将要加入的略缩图放入row中 -->
                <!-- start第一张略缩图开始 -->
                {% for item in list %}

                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6" style="height: 280px;">
                           
                        <div class="thumbnail">
                            <img src="{{ item.img }}" class="img-responsive" style="width: 280px;height:180px">

                            <div class="caption">
                                <button onclick="getvideo('{{ item.address }}')"> {{ item.title }}</button>
                            </div>

                               
                        </div>
                         
                    </div>
                    <!-- 第一张略缩图结束 -->
                {% endfor %}

            </div>

        </div>

    </div>


{% endblock %}

{% block script %}
    <script src="{% static 'player/cyberplayer.js' %}"></script>
    <script type="text/javascript">
        function getvideo(address) {
            var player = cyberplayer("playercontainer").setup({
                width: 400,
                height: 450,
                isLive: true, // 标明是否是直播
                file: address, // flv直播地址（×一定要支持跨域访问，否则要设置primary参数）
                autostart: true,
                stretching: "uniform",
                volume: 100,
                controls: true,
                ak: "72aef65271564e26a4166df0abfd99a4" // 公有云平台注册即可获得accessKey
            });

        }

    </script>
{% endblock %}